/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-01-12 09:35:49
 * @LastEditTime : 2023-07-12 09:02:56
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Login\SignUp.jsx
 * @Description  :
 */

import qs from 'qs'
import { Http } from '../Api'
import { project } from '../Data'
import { Form, Input, Button, ConfigProvider } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { useRequest, useBoolean, useEventEmitter } from 'ahooks'
import { ModifyPassword, LoginSignUpGetUserInfo } from './LoginFunc'
import { useState } from 'react'

const { hostname } = window.location

export const SignUp = ({ img }) => {
    // 修改密码弹出层
    const [Password, { setTrue: PasswordTrue, setFalse: PasswordFalse }] = useBoolean(false)
    const [loading, { setTrue, setFalse }] = useBoolean(false)
    const [userInfo, setUserInfo] = useState()
    const LoadingEvent = useEventEmitter()
    LoadingEvent.useSubscription(val => {
        if (val === 1) PasswordTrue()
        setFalse()
    })
    // 获取用户数据 && 进入程序
    const { run: getUserInfoData } = useRequest(Http, {
        manual: true,
        loadingDelay: 1000,
        onSuccess: res => LoginSignUpGetUserInfo(res, 1, LoadingEvent),
        onError: () => setFalse(),
    })
    return (
        <ConfigProvider theme={{ token: { colorTextPlaceholder: '#fff' } }}>
            <Form
                layout="vertical"
                className="SignUpForm"
                name="basic"
                autoComplete="off"
                onFinish={e => {
                    setTrue()
                    setUserInfo(e)
                    const { username, password } = e
                    const { client_id } = project[hostname]
                    const data = {
                        client_id,
                        client_secret: 'etime87857872',
                        grant_type: 'password',
                        username,
                        password,
                    }
                    getUserInfoData({ url: 'posToken', data: qs.stringify(data) })
                }}
            >
                <Form.Item name="username" rules={[{ required: true, message: '请输入用户账户!' }]}>
                    <Input
                        prefix={<UserOutlined className="InputIcon" />}
                        disabled={loading}
                        placeholder="请输入用户账户!"
                    />
                </Form.Item>
                <Form.Item name="password" rules={[{ required: true, message: '请输入用户密码!' }]}>
                    <Input.Password
                        prefix={<LockOutlined className="InputIcon" />}
                        disabled={loading}
                        placeholder="请输入用户密码!"
                    />
                </Form.Item>
                <Form.Item className="SignUpBtn">
                    <Button block type="primary" htmlType="submit" loading={loading}>
                        {img ? <img src={img} alt="" /> : loading ? '登录中...' : '登录'}
                    </Button>
                </Form.Item>
                {Password && <ModifyPassword Off={PasswordFalse} userInfo={userInfo} />}
            </Form>
        </ConfigProvider>
    )
}

export default SignUp
